<template>
  <div class="mask">
    <div class="box">
      <div class="top">
        <p>|</p>
        <span>添加考勤规则</span>
      </div>
      <div class="box1"  :model="changput">
        <div class="top">
          <p>|</p>
          <span>基本信息</span>
        </div>
        <div class="list">
          <div class="a1">
            <p>规则名称 <span class="xing">*</span></p>
            <el-input
              placeholder="请输入考勤规范名称"
              v-model="changput.name"
              size="large"
              type="text"
              autocomplete="off"
            />
          </div>
        </div>
        <div class="fen">
          所属项目 <span class="xing">*</span>
          <el-select
            clearable
            v-model="changput.items"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="fen">
          应用考勤组 <span class="xing">*</span>
          <el-select
            clearable
            v-model="changput.application"
            class="m-2"
            placeholder="Select"
            size="large"
          >
            <el-option
              v-for="item in options3"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </div>
        <div class="top">
          <p>|</p>
          <span>规定设置</span>
        </div>
        <div class="lie">
          <span>考勤方式<span class="xing">*</span></span>
          <el-tabs
            v-model="changput.types"
            class="demo-tabs"
            @tab-click="handleClick"
          >
            <el-tab-pane label="固定时间考勤" name="固定时间考勤">
              <span class="wen"
                >适用于固定上下班时间的人员，例如早八点上班，下午六点下班。</span
              >
              <div class="table">
                <div class="top3">
                  <p>|</p>
                  <span> 上班时间设定</span>
                </div>

                <div class="times">
                  <div class="time0">
                    <div class="tiem1">
                      <span>上班时间<span class="xing">*</span></span>
                      <el-input
                        placeholder="7.30"
                        v-model="changput.shangtime"
                        type="text"
                        autocomplete="off"
                      />
                    </div>
                    <span>_______</span>
                    <div class="tiem1">
                      <el-input
                        placeholder="7.30"
                        v-model="changput.shangtime"
                        type="text"
                        autocomplete="off"
                      />
                    </div>
                  </div>
                  <div class="time2">

                    <div class="time3">
                      <span>开始签到<span class="xing">*</span></span>
                      <el-input
                        placeholder="30"
                        v-model="changput.Officehours"
                        type="text"
                      />
                    </div>
                    <div class="time3">
                      <span>结束签到<span class="xing">*</span></span>
                      <el-input
                        placeholder="30"
                        v-model="changput.Officehours"
                        type="text"
                      />
                    </div>
                  </div>
                  <div class="time0">
                    <div class="tiem1">
                      <span>下班时间<span class="xing">*</span></span>
                      <el-input
                        placeholder="7.30"
                        v-model="changput.obbiechours"
                        type="text"
                        autocomplete="off"
                      />
                    </div>
                    <span>_______</span>
                    <div class="tiem1">
                     
                      <el-input
                        placeholder="7.30"
                        v-model="changput.obbiechours"
                        type="text"
                        autocomplete="off"
                      />
                    </div>
                  </div>
                  <div class="time2">

                    <div class="time3">
                      <span>开始签到<span class="xing">*</span></span>
                      <el-input
                        placeholder="40"
                        v-model="changput.Officehours"
                        type="text"
                      />
                    </div>
                    <div class="time3">
                      <span>结束签到<span class="xing">*</span></span>
                      <el-input
                        placeholder="40"
                        v-model="changput.Officehours"
                        type="text"
                      />
                    </div>
                  </div>
                  <div class="time0">
                    <div class="tiem1">
                      <span>午休时间<span class="xing">*</span></span>
                      <el-input
                        placeholder="8.30"
                        v-model="changput.xiutime"
                        type="text"
                        autocomplete="off"
                      />
                    </div>
                    <span>_______</span>
                    <div class="tiem1">
                    
                      <el-input
                        placeholder="8.30"
                        v-model="changput.xiutime"
                        type="text"
                        autocomplete="off"
                      />
                    </div>
                  </div>
                  <div class="time2">

                    <div class="time3">
                      <span>开始签到<span class="xing">*</span></span>
                      <el-input
                        placeholder="40"
                        v-model="changput.Officehours"
                        type="text"
                      />
                    </div>
                    <div class="time3">
                      <span>结束签到<span class="xing">*</span></span>
                      <el-input
                        placeholder="40"
                        v-model="changput.Officehours"
                        type="text"
                      />
                    </div>
                  </div>
                  
                </div>
                <div class="top3">
                  <p>|</p>
                  <span> 加班设定</span>
                </div>
               

                <div class="liee">
                  <span>记加班时间间隔 <span class="xing">*</span></span>
                  <el-input
                    placeholder="请输已加班时间(min)"
                    v-model="changput.interval"
                   
                    type="text"
                    
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="排班考勤" name="排班考勤">
              <span class="wen"
                >适用于需排班倒班工作的人员，例如早中晚三班倒制度。</span
              >
              <div class="table3">
                <div class="class">
                  <span>|</span>
                  <el-input
                    placeholder="排班时间段名称"
                    v-model="value6"
                    size="large"
                    type="text"
                    autocomplete="off"
                  />
                  <el-button type="danger" :icon="Delete" circle class="shan" />
                </div>
                <div class="liee">
                  <span>时间范围 <span class="xing">*</span></span>
                  <div class="example-basic">
                    <el-time-picker
                      v-model="value1"
                      placeholder="Arbitrary time"
                    />
                  </div>
                  <span>_______</span>
                  <div class="example-basic">
                    <el-time-picker
                      v-model="value2"
                      placeholder="Arbitrary time"
                    />
                  </div>
                </div>
                <div class="kuang">
                  <el-select
                    clearable
                    v-model="value"
                    class="m-2"
                    placeholder="Select"
                    size="large"
                  >
                    <el-option
                      v-for="item in options4"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span>允许最早签到时间</span>
                  <div class="example-basic">
                    <el-time-picker
                      v-model="value7"
                      placeholder="Arbitrary time"
                    />
                  </div>
                </div>
                <div class="kuang">
                  <el-select
                    clearable
                    v-model="value5"
                    class="m-2"
                    placeholder="Select"
                    size="large"
                  >
                    <el-option
                      v-for="item in options2"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                  <span>允许最晚签退时间</span>
                  <div class="example-basic">
                    <el-time-picker
                      v-model="value8"
                      placeholder="Arbitrary time"
                    />
                  </div>
                </div>
                <input type="text" placeholder="+ 添加排班时间段" />
                <div class="top">
                  <p>|</p>
                  <span>加班设定</span>
                </div>

                <div class="liee">
                  <span>记加班时间间隔 <span class="xing">*</span></span>
                  <el-input
                    placeholder="请输已加班时间(min)"
                    v-model="value"
                    size="large"
                    type="text"
                    autocomplete="off"
                  />
                </div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="不固定时间考勤" name="不固定时间考勤">
              <span class="wen"
                >适用不固定上下班时间的人员，例如小时工或临时工。</span
              >
              <div class="tabe2">
                <div class="top">
                  <p>|</p>
                  <span>不固定时间设定</span>
                </div>

                <div class="liee">
                  <span>晚于几点计为次日考勤 <span class="xing">*</span></span>
                  <div class="example-basic">
                    <el-time-picker
                      v-model="value1"
                      placeholder="Arbitrary time"
                    />
                  </div>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
        <el-divider />
        <div class="btn">
          <el-button type="warning" @click="save">保存</el-button>
          <el-button type="info" @click="oclose">取消</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch } from "vue";
import { Delete } from "@element-plus/icons-vue";
import service from '../../../utils/service'
import { ElTable } from "element-plus";
import { ElMessage } from "element-plus";
import type { TabsPaneContext } from "element-plus";
const value = ref('')
const value5 = ref('')
const value6 = ref('')

const value1 = ref();
const value2 = ref();
const value7 = ref();
const value8 = ref();

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
const props = defineProps<{
  id: string;
  
}>();


// 声明事件
const emit = defineEmits<{
  (e: "hide"): void;
  (e: "updatesuccess"): void;
}>();
// 取消
const oclose = () => {
  // 触发隐藏事件
  emit("hide");
};
//修改
interface Iputs{
    id: string;
  name: string;
  application: string;
  items: string;
  types:string;
  shangtime:string;
  Officehours:string;
  obbiechours:string;
  xiutime:string;
  interval:string;



}
const changput=reactive<Iputs>({
   id:"",
  name:"",
  application:"",
  items:"",
  types:"",
  shangtime:"",
  Officehours:"",
  obbiechours:"",
  xiutime:"",
  interval:""

})
const onclikbut=()=>{
    service({
        url:"/rulelist",
        params: {
      id: props.id,
    },
    }).then((res=>{
      
      
         changput.name=res.data[0].name
        changput.application=res.data[0].application
        changput.items=res.data[0].items
        changput.types=res.data[0].types
        changput.shangtime=res.data[0].shangtime
        changput.Officehours=res.data[0].Officehours
        changput.obbiechours=res.data[0].obbiechours
        changput.xiutime=res.data[0].xiutime
        changput.interval=res.data[0].interval

      

    }))
}
watch(
  props,
  () => {
    onclikbut();
    changput.name = "";
  },
  {
    deep: true,
  }
);
const save=()=>{
    service({
        url:`http://localhost:3000/rulelist/${props.id}`,
        method:"patch",
        data:changput
    }).then((res=>{
        ElMessage({
      message: "修改成功！",
      type: "success",
    });
    location.reload();
    emit("hide");
    emit("updatesuccess");
    }))

}


const options1 = [
  {
    value: "---请选择----",
    label: "---请选择----",
  },
  {
    value: "xxxxx项目1",
    label: "xxxxx项目1",
  },
  {
    value: "xxxxx项目2",
    label: "xxxxx项目2",
  },
  {
    value: "xxxxx项目3",
    label: "xxxxx项目3",
  },
];
const options3 = [
  {
    value: "---请选择(请多选)----",
    label: "---请选择(请多选)----",
  },
  {
    value: "考勤组1",
    label: "考勤组1",
  },
  {
    value: "考勤组2",
    label: "考勤组2",
  },
  {
    value: "考勤组3",
    label: "考勤组3",
  },
];
const options4=[
{
    value: "需签到",
    label: "需签到",
  },
  {
    value: "无需签到",
    label: "无需签到",
  }
  
]
const options2=[
{
    value: "需退签",
    label: "需退签",
  },
  {
    value: "无需退签",
    label: "无需退签",
  }
  
]


</script>

<style scoped>
.mask {
  /* 遮罩层的写法 */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}
.box {
  width: 939px;
  height: 700px;
  border: 1px solid #e5e4e4;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #ffffff;
  z-index: 999;
  overflow: auto;
}
.box .top {
  display: flex;
}
.box .top p {
  color: #3bb19c;
}
.box .top span {
  font-weight: 700;
}

.box1 {
  margin-left: 50px;
}
.box1 .a1 {
  display: flex;
  margin: 10px 0;
}
.a1 .el-input{
  width: 300px;
}
.example-basic .el-date-editor {
  margin: 8px;
}
.xing {
  color: red;
}
.fen {
  margin: 10px 0;
}
.el-select {
  margin-left: 20px;
}
.lie {
  display: flex;
}
.wen {
  color: red;
}
.table {
  width: 700px;
  height: 450px;
  border: 1px solid #eaeaea;
  margin-top: 10px;
}
.table .top3 {
  display: flex;
  margin-top: 10px;
  margin-left: 20px;
}
.table .top3 p {
  color: blue;
  margin-right: 5px;
}
.table .times {
  margin-top: -13px;
  margin-left: 40px;
}
.table .time0 {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
}

.table .times .el-input {
  width: 200px;
  margin-left: 20px;
}
.table .time2 {
  margin-left: 70px;
  margin-top: 15px;
  display: flex;
  justify-content: space-around;
}

.table .time3 .el-input {
  width: 100px;
}

.xian {
  margin-top: -20px;
  margin-left: 40px;
}
.liee {
  display: flex;
  margin-left: 20px;
  margin-top: 10px;
}
.liee .el-input{
  width: 300px;
}
.example-basic {
  margin: 0px 10px;
}
.table3 {
  width: 700px;
  height: 450px;
  border: 1px solid #eaeaea;
}
.table3 .class {
  margin: 10px;
}
.table3 .class .shan {
  margin-left: 10px;
}
.table3 .kuang {
  margin: 15px;
  display: flex;
  justify-content: space-around;
}
.table3 .kuang span {
  line-height: 40px;
}
.table3 input {
  margin-left: 254px;
  margin-top: 10px;
}
.el-input{
  width: 300px;
}
.btn {
  float: right;
}
</style>